.animation-base {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.expandRight {
    @extend .animation-base;
    animation-name: expandRight;
}

.collapseLeft {
    @extend .animation-base;
    animation-name: collapseLeft;
}

@keyframes expandRight {
    0% {
      width: 0;
      opacity: 0;
    }
    100% {
      width: 10.5rem;
      opacity: 1;
    }
  }

  @keyframes collapseLeft {
    0% {
      width: 10.5rem;
      opacity: 1;
    }
    100% {
      width: 0;
      opacity: 0;
    }
  }

  // Fade In Out
  .fade-in-enter {
    opacity: 0;
    transform: translateY(-5rem);
  }

  .fade-in-enter-to {
    opacity: 1;
    transform: translateY(0);
  }

  .fade-in-enter-active {
    transition: opacity 500ms ease;
  }